<template>
  <el-main>
    <el-row class="search1">
      <el-col :span="3">
        <el-input v-model="input" placeholder="请输入姓名/档案号" @change="searchenter"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" class="searchbtn" @click="searchbtn">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="tableData" stripe style="width: 100%"
          :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }">
          <el-table-column prop="fileNumber" label="档案号" width="180">
          </el-table-column>
          <el-table-column prop="memberName" label="姓名" width="180">
          </el-table-column>

          <el-table-column prop="memberSex" label="性别"> </el-table-column>
          <el-table-column prop="memberAge" label="年龄"> </el-table-column>
          <el-table-column prop="memberPhone" label="手机号"> </el-table-column>
          <el-table-column prop="memberEmail" label="邮箱"> </el-table-column>
          <el-table-column prop="" label="建档时间">
            {{ tableData.memberCreated | dateFormat }}
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="updataIn(scope.$index, scope.row)">指定方案</el-button>
              <!-- <el-button
                size="mini"
                type="danger"
                @click="showIn(scope.$index, scope.row)"
                >显示方案</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row class="page">
      <el-col :span="8" :offset="14">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-size="limit" :page-sizes="[5, 10, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            :total="Number(count)">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="确认分类" :visible.sync="dialogVisible" width="70%">
      <el-row>
        <el-col :span="10" :offset="1">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="dialogheight">
            <el-tab-pane label="基本信息" name="first">
              <el-row class="information">
                <el-col :span="4" :offset="1">档案号：</el-col>
                <el-col :span="7" v-text="row.fileNumber"></el-col>
                <el-col :span="4" :offset="1">姓名：</el-col>
                <el-col :span="7" v-text="row.memberName"></el-col>
              </el-row>
              <el-row class="information">
                <el-col :span="4" :offset="1">性别：</el-col>
                <el-col :span="7" v-text="row.memberSex"></el-col>
                <el-col :span="4" :offset="1">年龄：</el-col>
                <el-col :span="7" v-text="row.memberAge"></el-col>
              </el-row>
              <el-row class="information1">
                <el-col :span="4" :offset="1">疾病史：</el-col>
                <el-col :span="18" v-text="row.bingshi"></el-col>
              </el-row>
              <el-row class="information1">
                <el-col :span="4" :offset="1">遗传史：</el-col>
                <el-col :span="18" v-text="row.jiazushi"></el-col>
              </el-row>
              <el-row class="information1">
                <el-col :span="4" :offset="1">过敏史：</el-col>
                <el-col :span="18" v-text="row.guominshi"></el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-tabs v-model="activeName1" class="dialogheight">
            <el-tab-pane label="基本信息" name="first">
              <el-row class="information">
                <el-col :span="4" :offset="1">档案号：</el-col>
                <el-col :span="7" v-text="row.fileNumber"></el-col>
                <el-col :span="4" :offset="1">姓名：</el-col>
                <el-col :span="7" v-text="row.memberName"></el-col>
              </el-row>
              <el-row class="information">
                <el-col :span="4" :offset="1">性别：</el-col>
                <el-col :span="7" v-text="row.memberSex"></el-col>
                <el-col :span="4" :offset="1">年龄：</el-col>
                <el-col :span="7" v-text="row.memberAge"></el-col>
              </el-row>

              <el-form ref="interveneForm" :model="interveneForm" :rules="rules" label-width="80px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="选用模板">
                      <el-select v-model="interveneForm.name" placeholder="请选用选用模板" @focus="findAllFormwork"
                        @change="CfindAllFormwork">
                        <el-option v-for="item in interveneForm.findAllFormwork" :label="item.title" :value="item.id"
                          :key="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <el-form-item label="方案标题" required prop="title">
                      <el-input v-model="interveneForm.title"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="开始日期" required>
                      <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="选择日期" v-model="interveneForm.date1" style="width: 100%"
                          value-format="timestamp"></el-date-picker>
                      </el-form-item>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="1">

                    <el-form-item label="结束日期" required>
                      <el-form-item prop="date2">
                        <el-date-picker type="date" placeholder="选择日期" v-model="interveneForm.date2" style="width: 100%"
                          value-format="timestamp"></el-date-picker>
                      </el-form-item>
                    </el-form-item>

                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="21">
                    <el-form-item label="方案目标" prop="target" required>
                      <el-input v-model="interveneForm.target" type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="10">
                    <el-form-item label="推荐饮食" required prop="meal">
                      <el-input v-model="interveneForm.meal"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <el-form-item label="推荐运动" required prop="sport">
                      <el-input v-model="interveneForm.sport"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :offset="12" style="margin-top:20px">
                    <el-form-item>
                      <el-button @click="resetForm('interveneForm')">取消</el-button>
                      <el-button type="primary" @click="submitForm('interveneForm')">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>

          </el-tabs>

        </el-col>
      </el-row>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      interveneForm: {
        name: "",
        findAllFormwork: {},
        date1: "",
        date2: "",
        title: "",
        target: "",
        meal: '',
        sport: '',
        id: ''
      },
      rules: {
        date1: [
          { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
        ],
        target: [
          { required: true, message: '请选择目标', trigger: 'change' }
        ],
        meal: [
          { required: true, message: '请选择饮食', trigger: 'change' }
        ],
        sport: [
          { required: true, message: '请选择运动', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请选择标题', trigger: 'change' }
        ],
      },
      activeName1: "first",
      activeName: "first",
      dialogVisible: false,
      row: "",
      input: "",
      tableData: [],
      limit: 5,
      page: 1,
      count: "",
    };
  },
  methods: {


    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          this.$axios({
            url: "/intervene/add",
            method: 'post',
            data: {
              'id': this.interveneForm.id,
              'goal': this.interveneForm.target,
              'ended': this.interveneForm.date2,
              'sport': this.interveneForm.sport,
              'meal': this.interveneForm.meal,
              'started': this.interveneForm.date1,
              'title': this.interveneForm.title,
            }
          }).then(res => {
            // ////console.log(res);
            this.$refs[formName].resetFields();
          })
        } else {
          // ////console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },

    CfindAllFormwork(e) {
      ////console.log(e);
      this.$axios({
        url: "/intervene/useFormwork",
        method: "get",
        params: { id: e },
      }).then((res) => {
        // ////console.log(res);
        this.interveneForm.title = res.data.title;
        this.interveneForm.target = res.data.goal;
        this.interveneForm.sport = res.data.sport
        this.interveneForm.meal = res.data.meal
      });
    },
    findAllFormwork() {
      ////console.log(111);
      this.$axios({
        url: "/intervene/findAllFormwork",
        method: "get",
      }).then((res) => {
        // ////console.log(res);
        this.interveneForm.findAllFormwork = res.data;

      });
    },

    handleClick() { },
    handleSizeChange(val) {
      // ////console.log(`每页 ${val} 条`);
      ////console.log(this.input);
      if (this.input) {
        this.limit = val;
        this.searchname();
      } else {
        this.limit = val;
        this.InterveneList();
        ////console.log(this.input);
      }
    },
    handleCurrentChange(val) {
      //   ////console.log(`当前页: ${val}`);
      //   ////console.log(this.input);
      if (this.input) {
        this.page = val;
        this.searchname();
      } else {
        this.page = val;
        this.InterveneList();
      }
    },
    searchenter(val) {
      this.page = 1;
      this.input = val;
      this.searchname();
      // ////console.log(this.page);
    },
    searchbtn() {
      this.page = 1;
      this.searchname();
      // ////console.log(this.page);
    },
    // showIn(index, row) {
    //   // ////console.log(row.id);
    //   this.$axios({
    //     url:''
    //   })
    // },
    updataIn(index, row) {
      // ////console.log(row.id);
      this.interveneForm.id = row.id

      this.$axios({
        url: "/intervene/findMemberInfo",
        method: "get",
        params: { id: row.id },
      }).then((res) => {
        this.row = res.data;
        //  ////console.log(this.row);
      });

      this.dialogVisible = true;
      this.activeName = "first";
      this.activeName1 = "first";
    },
    InterveneList() {
      this.$axios({
        url: "/intervene/memberList",
        method: "post",
        data: { page: this.page, limit: this.limit },
      }).then((res) => {
        // ////console.log(res);
        this.count = res.count;
        this.tableData = res.data;
      });
    },
    searchname() {
      if (Number(this.input)) {
        this.$axios({
          url: "/intervene/memberList",
          method: "post",
          data: {
            fileNumber: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          // ////console.log(res);
          this.tableData = res.data;
          this.count = res.count;
        });
      } else {
        this.$axios({
          url: "/intervene/memberList",
          method: "post",
          data: {
            memberName: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          // ////console.log(res);
          this.tableData = res.data;
          this.count = res.count;
        });
      }
    },
  },
  created() {
    this.InterveneList();
  },
};
</script>

<style scoped>
.dialogheight {
  height: 500px !important;
}

.search1 {
  margin-bottom: 30px;
}

.searchbtn {
  margin-left: 30px;
}

.page {
  margin-top: 30px;
}

.block {
  font-size: 20px;
}

.information {
  margin-bottom: 30px;
}

.information1 {
  height: 110px;
}
</style>